<template>
  <el-main>
    <el-table :data="hotProjectOrderInfoList" v-loading="" style="width: 100%; margin-bottom: 20px;" row-key="projectId"
      border :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="项目" width="200"> </el-table-column>
      <el-table-column prop="projectId" label="" v-if="false"> </el-table-column>
      <el-table-column prop="projectOrderIndex" label="排序" width="500"> </el-table-column>
      <el-table-column width="400">
        <template slot-scope="scope">
        <el-button v-show="!validateOperate(scope.row, 'up')" @click="handleHotProjectOrder(scope.row, 'up')" size="mini" icon="el-icon-top"></el-button>
        <el-button v-show="!validateOperate(scope.row, 'down')" @click="handleHotProjectOrder(scope.row, 'down')" size="mini" icon="el-icon-bottom"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
export default {
    //注册组件
   components:{

   },
   data() {
     return {
        hotProjectOrderInfoList: [{
          projectId: 3,
          name: '王小虎',
          projectOrderIndex: 1,
          children: [{
              projectId: 31,
              name: '王1虎',
              projectOrderIndex: 1
            }, {
              projectId: 32,
              name: '王2虎',
              projectOrderIndex: 2
          }]
        }],
        
      }
    },
    created(){
      // this.handleHotProjectOrder()
    },
    // 挂载后调用
    mounted() {

    },
    methods: {
      handleHotProjectOrder(row, type) {

      let currentProjectOrderIndex = row.projectOrderIndex

      if (row.children && row.children.length != 0) {//有children 则 排城市

        this.hotProjectOrderInfoList.forEach( item => {

          if (type == 'up') {

            if( item.projectOrderIndex == (currentProjectOrderIndex-1) ) {

              item.projectOrderIndex = item.projectOrderIndex + 1

            } else if (item.projectOrderIndex == currentProjectOrderIndex) {

              item.projectOrderIndex = currentProjectOrderIndex - 1

            }

          } else if (type == 'down') {

            if( item.projectOrderIndex == currentProjectOrderIndex ) {

                item.projectOrderIndex = currentProjectOrderIndex + 1

            } else if (item.projectOrderIndex == (currentProjectOrderIndex + 1)) {

              item.projectOrderIndex = currentProjectOrderIndex

            }

          }

        })
        this.hotProjectOrderInfoList.sort(this.projectOrderIndexCompare);
        return;
      }

      //没有children 则 排项目
      this.hotProjectOrderInfoList.forEach(item1 => {

        if (row.cityCode == item1.cityCode) {//

          item1.children.forEach( item => {

            if (type == 'up') {

              if( item.projectOrderIndex == (currentProjectOrderIndex-1) ) {

                  item.projectOrderIndex = item.projectOrderIndex + 1

              } else if (item.projectOrderIndex == currentProjectOrderIndex) {
                
                  item.projectOrderIndex = currentProjectOrderIndex - 1

                  item1.children.sort(this.projectOrderIndexCompare);//到这步就已经将功能完成了 所以直接排序后return 没必要循环之后的数据

                  return

              }

            } else if (type == 'down') {

              if( item.projectOrderIndex == currentProjectOrderIndex ) {
                item.projectOrderIndex = currentProjectOrderIndex + 1

              } else if (item.projectOrderIndex == (currentProjectOrderIndex + 1)) {

                item.projectOrderIndex = currentProjectOrderIndex

                item1.children.sort(this.projectOrderIndexCompare);//到这步就已经将功能完成了 所以直接排序后return 没必要循环之后的数据

                return

              }

            }

          })

        }

      })
    },

    //用于判断热门项目排序的操作按钮是否可用

    validateOperate(row, type) {

      let that = this

      if (row.children && row.children.length != 0) {//有children

        if (type == 'up' && row.projectOrderIndex == 1) {

          return true;

        } else if (type == 'down' && row.projectOrderIndex == this.hotProjectOrderInfoList.length) {

          return true;

        } else {

          return false;

        }

      } else {

        if (type == 'up' && row.projectOrderIndex == 1) {

          return true;

        } else if (type == 'down') {//这里需要找children的length

          return that.getHotProjectCityChildrenLength(row.cityCode, row.projectOrderIndex);

        } else {

          return false;

        }

      }

    },

    //获取某个城市项目的数据 热门项目排序时用到

    getHotProjectCityChildrenLength(cityCode, projectOrderIndex) {

      let result = false;

      this.hotProjectOrderInfoList.forEach(item => {

        if (item.cityCode == cityCode) {

          result = item.children.length == projectOrderIndex;

        }

      })

      return result

    },

  }
}
</script>

<style>

</style>